<template>
  <div>
    <zeda-dialog
      v-model="visible"
      width="80%"
      title="实时负荷详情"
      :before-close="handleClose"
    >
      <aps-form
        :config="apsForm.formConfig"
        :model="apsForm.formData"
        :formRef="apsForm.formRef"
        :labelWidth="apsForm.labelWidth"
        ref="form"
      ></aps-form>
      <lb-table
        :column="tableData.column"
        :data="tableData.data"
        pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :page-sizes="[5, 10, 20, 30]"
        :pager-count="5"
        :current-page.sync="currentPage"
        :total="total"
        :page-size="pageSize"
        @size-change="handleSizeChange"
        @p-current-change="handleCurrentChange"
      >
      </lb-table>
      <form-button
        slot="footer"
        cancel-text="关闭"
        :show-submit-button="false"
        @cancel="handleClose"
      ></form-button>
    </zeda-dialog>
  </div>
</template>
<script>
import Title from "@/components/Title";
import FormButton from "@/components/FormButton";
import { newList } from "@/api/iot/inspect";
import { dealElectricity, secondChangedate } from "@/utils/index";
export default {
  components: {
    Title,
    FormButton,
  },
  props: {
    visible: { type: Boolean, default: false },
    id: { type: [String, Number, Object], default: "" },
  },
  data() {
    return {
      apsForm: {
        formRef: "form",
        labelWidth: "120px",
        formData: {},
        formConfig: {
          formAttr: {
            inline: true,
            size: "small",
          },
          properties: {},
          formSoltButton: [
            {
              label: "导出",
              typeName: "el-button",
              size: "small",
              icon: "el-icon-upload2",
              disabled: true,
              click: this.handleDerive,
            },
          ],
        },
      },
      tableData: {
        column: [
          {
            prop: "deviceName",
            label: "设备名称",
            showOverflowTooltip: true,
          },
          {
            prop: "eventTime",
            width: "240",
            label: "自检时间",
          },
          {
            prop: "pa",
            label: "A相有功功率（KW）",
          },
          {
            prop: "pb",
            label: "B相有功功率（KW）",
            render: (h, scope) => {
              let a;
              if (scope.row.pb == "0.000") {
                a = "—";
              } else {
                a = scope.row.pb;
              }
              return h("div", a);
            },
          },
          {
            prop: "pc",
            label: "C相有功功率（KW）",
            render: (h, scope) => {
              let a;
              if (scope.row.pc == "0.000") {
                a = "—";
              } else {
                a = scope.row.pc;
              }
              return h("div", a);
            },
          },
          {
            prop: "p",
            label: "总有功功率（KW）",
          },
        ],
        data: [],
      },
      currentPage: 1,
      pageSize: 10,
      total: 0,
    };
  },
  watch: {
    visible: {
      handler(value) {
        if (value) {
          // console.log(this.id, "实时负荷二级参数");
          this.getInfo(this.id);
        }
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    handleSizeChange(val) {
      this.currentPage = 1;
      this.pageSize = val;
      this.getInfo(this.id);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getInfo(this.id);
    },
    /* 导出 */
    handleDerive() {},
    getInfo(idboj) {
      let params = idboj;
      params.pageNum = this.currentPage;
      params.pageSize = this.pageSize;
      this.tableData.data = [];
      newList(params)
        .then((res) => {
          console.log(res);
          if (res.code === 700) {
            this.$message.warning(res.msg);
            return false;
          }
          let arr = res?.rows ?? [];
          if (arr.length !== 0) {
            arr.map((item) => {
              let obj = {
                deviceName: item.deviceName,
                eventTime: secondChangedate(item.eventTime * 1000),
                pa: dealElectricity(item.activePower.pa, 1000, 3),
                pb: dealElectricity(item.activePower.pb, 1000, 3),
                pc: dealElectricity(item.activePower.pc, 1000, 3),
                p: dealElectricity(item.activePower.p, 1000, 3),
              };
              this.tableData.data.push(obj);
            });
          } else {
            this.tableData.data = [];
          }
          this.total = res?.total ?? 0;
        })
        .catch((err) => {
          // this.$message.error("系统错误,请联系管理员!20004");
        });
    },
    handleClose(status) {
      console.log(status);
      this.$emit("close", typeof status === "boolean" ? status : false);
    },
  },
};
</script>
